<template>
  <div>
    <div id="home-container">
      <section class="sec-01">
        <swiper :options="swiperOption">
          <swiper-slide>
            <img class="sec-01__img" src="../assets/img/wx/home/banner1.png" alt="">
          </swiper-slide>
          <swiper-slide>
            <img class="sec-01__img" src="../assets/img/wx/home/banner2.png" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </section>

      <section class="sec-02">
        <div class="sec-02__title" flex=" dir:top main:center cross:center">
          <h4 class="sec-02__title__h4">新能源纯电动</h4>
          <p class="sec-02__title__p">每公里仅需0.09元</p>
          <div class="sec-02__title__line"></div>
        </div>
        <div class="sec-02__content ">
          <div class=" mode-desc">
            <p class="mode-desc__p1">开瑞优优EV</p>
            <p class="mode-desc__p2">长续航/&nbsp;动力强/大空间&nbsp;/&nbsp;耐低温</p>
            <span class=" mode-desc__line"></span>
            <div class="">
              <p class="mode-desc__p3">40度超大容量,工况275KM(等速>300KM)</p>
              <p class="mode-desc__p3">节能高效设计,采用高效率永磁电机电控</p>
            </div>
            <router-link to="/kruu-ev" class="mode-desc__a">More></router-link>
          </div>
          <div class="sec-02__content__banner" flex="main:center">
            <swiper :options="swiperOption02">
              <swiper-slide flex="main:center">
                <img src="../assets/img/wx/home/car2.png" class="sec-02__content__banner_img" alt="">
              </swiper-slide>
              <swiper-slide flex="main:center">
                <img src="../assets/img/wx/home/car2.png" class="sec-02__content__banner_img" alt="">
              </swiper-slide>
              <div class="swiper-button-next" slot="button-next"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
            </swiper>
          </div>
        </div>
      </section>

      <section class="sec-03  " flex="dir:top ">
        <div class="sec-03__title" flex="dir:top main:center cross:center">
          <p class="sec-03__title_p1">我们做的</p>
          <p class="sec-03__title_p2 ">不止是汽车销售</p>
          <p class="sec-03__title_line"></p>
        </div>
        <div class="sec-03__box1">
          <div class="sec-03__box1_content">
            <div class="sec-03__box1_content_img1">
              <img src="../assets/img/wx/home/img1.png" :class={hover:isShow1} alt="">
            </div>
            <div class="sec-03_box1_content_title" flex="main:right">
              <div>
                <p class="sec-03__box1_title_p">以租代售</p>
                <router-link to="/rantsale" class="sec-03__a">More></router-link>
              </div>
            </div>
          </div>
          <div class="sec-03__box1_content1">
            <img src="../assets/img/wx/home/kuai1.png" alt="">
            <div class="sec-03__box1_content1_num1">
              <img src="../assets/img/wx/home/num1.png" alt="">
            </div>
          </div>
        </div>
        <div class="sec-03__box2">
          <div class="sec-03__box2_content" flex="dir:top cross:center ">
            <div class="sec-03__box2_content_img2">
              <img src="../assets/img/wx/home/home_banner2.png" :class={hover2:isShow2} alt="">
            </div>
            <div class="sec-03__box2_content_title">
              <p>全款销售</p>
              <router-link to="/fullpayment" class="sec-03__a">More></router-link>
            </div>
          </div>
          <div class="sec-03__box2_content2">
            <div class="sec-03__box2_content2_img">
              <img src="../assets/img/wx/home/kuai2.png" alt="">
            </div>
            <div class="sec-03__box2_content2_num2">
              <img src="../assets/img/wx/home/num2.png" alt="">
            </div>
          </div>
        </div>
        <div class="sec-03__box3">
          <div class="sec-03__box3_content">
            <div class="sec-03__box3_content_img3">
              <img src="../assets/img/wx/home/kuai3.png" alt="">
            </div>
            <div class="sec-03__box3_content_num3">
              <img src="../assets/img/wx/home/num3.png" alt="">
            </div>
          </div>
          <div class="sec-03__box3_content2">
            <div class="sec-03__box3_content2_title" flex="main:right">
              <div>
                <p>租赁服务</p>
                <router-link to="/tenancy" class="sec-03__a">More></router-link>
              </div>
            </div>
            <div class="sec-03__box3_content2_img">
              <img src="../assets/img/wx/home/home_l3_img3.png" :class={hover3:isShow3} alt="">
            </div>
          </div>
        </div>
      </section>

      <section class="sec-04 ">
        <div class="sec-04__title" flex=" dir:top main:center cross:center">
          <p>运力服务</p>
          <span>橙配一专车送货&nbsp;值得托付</span>
          <div class="sec-04__title_line"></div>
          <a href="#">More></a>
        </div>
        <div class="sec-04__banner">
          <div id="marque">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td id=marque_table>
                  <table cellpadding="0" cellspacing="0">
                    <tr>
                      <td><img src="../assets/img/wx/home/home_l4_banner1.png"></td>
                      <td><img src="../assets/img/wx/home/home_l4_banner2.png"></td>
                    </tr>
                  </table>
                </td>
                <td id=marque_table_temp></td>
              </tr>
            </table>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Core from "core/core"

  export default {
    data() {
      return {
        isShow1: false,
        isShow2: false,
        isShow3: false,
        timer: "",
        type: 1,
        currentPage: 1,
        pageSize: 10,
        swiperOption: {
          slidesPerView: 1,
          spaceBetween: 0,
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        swiperOption02: {
          slidesPerView: 1,
          spaceBetween: 0,
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-prev',
            prevEl: '.swiper-button-next'
          }
        }

      }
    },
    mounted: function () {
      this._getArticleList(this.type, this.currentPage, this.pageSize);
      window.addEventListener("scroll", this.handleScroll);
      this.leftScroll();
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
      _getArticleList(type, page, limit) {
        Core.Api.Article.getArticleList(type, page, limit).then(res => {
          console.log(res, 111)
        }).catch(err => {
          console.log(err, 222)
        })
      },
      handleScroll() {
        var scrollTop=0;
        var scrollTop = window.pageYOffset  || document.body.scrollTop
        if (scrollTop < 1400 && scrollTop > 980) {
          this.isShow1 = true;
        }
        if (scrollTop > 1200 && scrollTop < 1650) {
          this.isShow2 = true;
        }
        if (scrollTop > 1700 && scrollTop < 2050) {
          this.isShow3 = true;
        }
      },
      leftScroll() {
        var speed = 50;
        marque_table_temp.innerHTML = marque_table.innerHTML

        function Marquee() {
          if (marque.scrollLeft >= marque_table.scrollWidth) {
            marque.scrollLeft = 0
          } else {
            marque.scrollLeft++
          }
        }

        var MyMar = setInterval(Marquee, speed);
        marque.onmouseover = function () {
          clearInterval(MyMar)
        };
        this.timer = MyMar;
        marque.onmouseout = function () {
          MyMar = setInterval(Marquee, speed)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  #marque {
    width: 100%;
    overflow: hidden;
    margin: 0px auto
  }

  #home-container {
    .sec-01 {
      width: 100%;
      height: 100vh;
      .sec-01__img {
        width: 100%;
        height: 100vh;
      }
    }
    .sec-02 {
      .sec-02__title {
        background: black;
        height: 25vh;
        .sec-02__title__h4 {
          color: white;
          font-weight: normal;
          padding: 1.5% 0;
          margin: 0;
          font-size:52px;
        }
        .sec-02__title__p {
          font-size: 35px;
          font-weight: normal;
          color: rgb(10, 131, 101);
          padding-bottom: 2%;
        }
        .sec-02__title__line {
          width: 83px;
          height: 2.4px;
          background: white;
        }
      }
      .sec-02__content {
        width: 100%;
        height: 75vh;
        background: url("../assets/img/wx/home/background.png") no-repeat center center;
        background-size: cover;
        .mode-desc {
          width: 100%;
          padding: 89px 86px 0;
          color: white;
          .mode-desc__p1 {
            font-size: 40px;
            padding: 2% 0;
          }
          .mode-desc__p2 {
            font-size: 28px;
          }
          .mode-desc__p3 {
            font-size:25px;
            padding-bottom: 2%;
          }
          .mode-desc__line {
            display: block;
            width: 13vw;
            height: 3px;
            background: rgb(10, 131, 101);
            margin: 23px 0;
          }
          .mode-desc__a {
            display: block;
            color: rgb(10, 131, 101);
            padding-top: 2vh;
          }
        }
        .sec-02__content__banner {
          width: 100%;
          height: 43vh;
          margin-top: 7vh;
          position: relative;
          .sec-02__content__banner_img {
            height: 20vh;
            margin: 7vh;
            margin-left: 19%;
          }
          .swiper-button-prev {
            width: 42px;
            height: 42px;
            background: url("../assets/img/wx/home/icon-left.png") center center;
            background-size: cover;
            outline: none;
          }
          .swiper-button-next {
            width: 42px;
            height: 42px;
            background: url("../assets/img/wx/home/icon-right.png") center center;
            background-size: cover;
            outline: none;
          }
        }
      }
    }
    .sec-03 {
      width: 100%;
      background-color: black;
      position: relative;
      .sec-03__a {
        color: rgb(10, 131, 101);
        font-size: 18.75px;
      }
      .sec-03__title {
        width: 100%;
        padding: 47px 0;
        .sec-03__title_p1 {
          color: white;
          font-size: 33px;
        }
        .sec-03__title_p2 {
          color: rgb(10, 131, 101);
          font-size: 51px;
          padding: 2% 0;
        }
        .sec-03__title_line {
          width: 10%;
          height: 3px;
          background: white;
        }
      }
      .sec-03__box1 {
        width: 100vw;
        height: 45vh;
        margin: 8% 0;
        position: relative;
        padding-left: 61px;
        .sec-03__box1_content {
          width: 70%;
          height: 40vh;
          position: absolute;
          z-index: 100;
          .sec-03__box1_content_img1 {
            width: 100%;
            height: 30vh;
            overflow: hidden;
          }
          .sec-03__box1_content_img1 img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
          }
          .sec-03__box1_content_img1 img.hover {
            transform: scale(1.4);
          }
          .sec-03_box1_content_title {
            padding: 6% 0;
            .sec-03__box1_title_p {
              color: white;
              font-size: 34px;
              padding-bottom: 5%;
            }
          }
        }
        .sec-03__box1_content1 {
          width: 80%;
          height: 30%;
          position: absolute;
          right: 0;
          bottom: 10%;
          .sec-03__box1_content1_num1 {
            width: 20%;
            height: 128%;
            position: absolute;
            bottom: 0;
            right: 5%;
          }
          .sec-03__box1_content1_num1 img {
            width: 100%;
            height: 100%;
          }
        }
        .sec-03__box1_content1 img {
          width: 100%;
          height: 100%;
        }
      }
      .sec-03__box2 {
        width: 100vw;
        height: 50vh;
        margin: 8% 0;
        position: relative;
        .sec-03__box2_content {
          width: 100%;
          height: 80%;
          position: absolute;
          z-index: 100;
          .sec-03__box2_content_img2 {
            width: 80%;
            height: 78%;
            overflow: hidden;
          }
          .sec-03__box2_content_img2 img {
            width: 100%;
            height: 100%;
            transition: all 0.6s;
          }
          .sec-03__box2_content_img2 img.hover2 {
            transform: scale(1.4);
          }
          .sec-03__box2_content_title {
            width: 80%;
            padding-top: 4%;
          }
          .sec-03__box2_content_title p {
            font-size: 34px;
            color: white;
          }
        }
        .sec-03__box2_content2 {
          width: 80%;
          height: 50%;
          position: absolute;
          bottom: 0;
          .sec-03__box2_content2_img {
            width: 100%;
            height: 70%;
          }
          .sec-03__box2_content2_img img {
            width: 100%;
            height: 100%;
          }
          .sec-03__box2_content2_num2 {
            width: 22%;
            height: 70%;
            position: absolute;
            bottom: 2%;
            left: 40%;
          }
          .sec-03__box2_content2_num2 img {
            width: 100%;
            height: 100%;
          }
        }

      }
      .sec-03__box3 {
        width: 100vw;
        height: 40vh;
        margin-bottom: 5%;
        position: relative;
        .sec-03__box3_content {
          width: 75%;
          height: 55%;
          position: absolute;
          right: 0;
          .sec-03__box3_content_img3 {
            width: 100%;
            height: 58%;
          }
          .sec-03__box3_content_img3 img {
            width: 100%;
            height: 100%;
          }
          .sec-03__box3_content_num3 {
            width: 25%;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .sec-03__box3_content_num3 img {
            width: 100%;
          }
        }
        .sec-03__box3_content2 {
          width: 80%;
          height: 95%;
          position: absolute;
          z-index: 100;
          .sec-03__box3_content2_title {
            padding-top: 3%;
          }
          .sec-03__box3_content2_title p {
            font-size: 34px;
            color: white;
          }
          .sec-03__box3_content2_img {
            width: 90%;
            position: absolute;
            right: 0;
            overflow: hidden;
          }
          .sec-03__box3_content2_img img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
          }
          .sec-03__box3_content2_img img.hover3 {
            transform: scale(1.4);
          }
        }
      }
    }
    .sec-04 {
      width: 100%;
      background: black;
      .sec-04__title {
        width: 100%;
        padding: 25px 0;
      }
      .sec-04__title p {
        font-size: 44px;
        color: white;
      }
      .sec-04__title a {
        color: rgb(10, 131, 101);
        font-size: 14px;
        padding-top: 2%;
      }
      .sec-04__title span {
        font-size: 33px;
        color: rgb(10, 131, 101);
        padding: 2.5% 0;
      }
      .sec-04__title_line {
        width: 73px;
        height: 2px;
        background: #e3e3e3;
      }
      .sec-04__banner {
        overflow: hidden;
        position: relative;

      }
      .sec-04__banner img {
        height: 36vh;
        width: 100vw;
      }
    }

  }


</style>
